<template>
  <div class="login">
    <div class="card" style="padding-top: 4%">
      <div class="header">
        <div style="display:flex">
          <div class="logos"></div>
          <div style="display:flex;flex-direction: column;">
            <div class="stitle" style="padding-top:20px">融创大健康Al中医药膳系统</div>
            <div class="" style="color:#666;margin-left:0px;margin-top:0px">Rong Chuang Big Health Al TCM Tonic Diet system</div>
          </div>
        </div>
        <div class="btn" @click="buindex">返回主页</div>
      </div>
    </div>
    <div class="card" style="padding-top: 5%">
      <div class="flex">
        <div
          style="width: 65%; background: #fff; border-radius: 20px; padding: 10px 30px"
        >
          <div class="flexs">
            <div style="width: 200px;" class="cl">
              <div class="logo"></div>
              <div class="stitle">融创大健康</div>
              <div class="stitle">中医体质查询系统</div>
            </div>
            <div style="flex: 1; font-size: 14px; color: #6c6c6c; line-height: 30px">
              融创大健康Al中医药膳系统采取“人工智能+智慧中医”模式，与安徽中医药大学合作，秉持“践行健康中国战略，致力全民健康服务”理念，专注于中医人工智能技术的研发与应用。融创大健康科技集团在舌象大数据采集、舌象特征分析、健康状态辨识等领域，同安徽中医药大学及其合作企业展开深度研究，研发出“融创养老
              A1中医药膳系统”。该平台运用“基于机器学习的中医舌色苔色定量分析方法”，用户仅需拍摄并上传舌面、舌下、面部照片，结合智能问诊，中医
              A1便可在
              10秒内提供中医健康状态辨识(106种)、中医妇科疾病检测(163种)、儿童体质健康辨识(47种)、慢病分型与调理(40种)、舌象与病种研究、中医A1辅助诊断等服务。
            </div>
          </div>
        </div>
        <div class="search">
          <div class="stitle">未查询到结果···</div>
          <div style="color: #888; font-size: 16px; font-weight: bold; margin-top: 5px">
            您可能未通过中医AI诊断
          </div>

          <div style="color: #888; font-size: 16px; font-weight: bold; margin-top: 5px">
            请到AI中医室进行查询...
          </div>
          <div
            style="height: 2px; background: #888; width: 130px; margin-top: 15px"
          ></div>
          <div style="color: #888; font-size: 16px; margin-top: 5px">AI中医馆：5楼</div>
          <div style="color: #888; font-size: 16px; margin-top: 5px">
            诊断费用：299积分/29.9元
          </div>
          <div style="color: #888; font-size: 14px; margin-top: 5px">
            开放时间：工作日8：00—18：00
          </div>

          <div class="flexs" style="margin: 10px 0">
            <div class="kf"></div>
          </div>
          <div
            style="
              color: #888;
              margin-top: 5px;
              display: flex;
            "
          >
            <span style="font-size: 16px">客服电话：</span
            ><span style="text-align: center; font-weight: bold; font-size: 20px"
              >19213578138</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="el-login-footer">
      <span>Copyright © 2018-2025 山西融创康养科技有限公司.</span>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  setup() {
    const searchClick = () => {
      console.log("searchClick searchClick");
    };
    // const searchClick = () = {

    // };
    const router = useRouter();
    const buindex = () => {
      router.push({
        path: "/index",
      });
    };
    onMounted(() => {
      //   listTongue();
    });

    return {
      searchClick,
      buindex,
    };
  },
};
</script>

<style scoped lang="scss">
.el-login-footer {
  // height: 40px;
  // line-height: 40px;
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  // color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}
.kf {
  background-image: url("../assets/images/kf.jpg");
  width: 100px;
  height: 100px;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.login {
  background-image: url("../assets/images/banner.jpg");
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.logos {
  background-image: url("../assets/images/logo.png");
  width: 70px;
  height: 70px;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.logo {
  background-image: url("../assets/images/footer.png");
  width: 150px;
  height: 200px;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.card {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.header {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  background: rgb(208, 165, 34);
  padding: 10px 25px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border-radius: 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.carousel-item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.back {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.swiper-slide {
  background: #fff;
  // height: 500px;
  border-radius: 20px;
}
.gong {
  font-size: 26px;
  font-weight: bold;
  color: rgb(108, 108, 108);
  margin-top: 15px;
}
.title {
  font-size: 26px;
  font-weight: bold;
  color: rgb(108, 108, 108);
  margin-top: 15px;
}
.cards {
  font-size: 20px;
  color: #888;
  margin-top: 15px;
}
.search {
  background: #fff;
  padding: 20px 50px;
  border-radius: 20px;
  flex: 1;
  margin-bottom: 0;
}
.stitle {
  font-size: 26px;
  padding: 0px 0px;
  color: rgb(208, 165, 34);
  font-weight: bold;

}
.searchBtn {
  background: rgb(208, 165, 32);
  width: 150px;
  height: 150px;
  padding: 40px 40px;
  font-size: 32px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl{

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 20px;

}
</style>
